API Call এর জন্য Thunk ব্যবহার করা

Redux-এ API call বা Asynchronous actions ম্যানেজ করার জন্য Redux Thunk খুবই জনপ্রিয় একটি মিডলওয়্যার। সাধারণ Redux অ্যাকশনের মাধ্যমে আমরা শুধুমাত্র সিঙ্ক্রোনাস কাজ যেমন স্টেট পরিবর্তন করতে পারি। কিন্তু যখন আমাদের এপিআই কল বা অন্যান্য অ্যাসিঙ্ক্রোনাস কার্যক্রম পরিচালনা করতে হয়, তখন Redux Thunk আমাদের সাহায্য করে।

Redux Thunk কী?

Redux Thunk হলো একটি মিডলওয়্যার, যা অ্যাসিঙ্ক্রোনাস অ্যাকশন (যেমন, API call) পরিচালনা করার জন্য Redux অ্যাকশন ক্রিয়েটরকে ফাংশন রিটার্ন করার সুযোগ দেয়। সাধারণত, Redux অ্যাকশন ক্রিয়েটর একটি অ্যাকশন অবজেক্ট রিটার্ন করে, কিন্তু Thunk আমাদের ফাংশন রিটার্ন করার সুযোগ দেয়, যা স্টোরকে ডিসপ্যাচ করতে পারে এবং অ্যাসিঙ্ক্রোনাস কাজ যেমন API কল করতে পারে।

Thunk কীভাবে কাজ করে?

Redux Thunk মিডলওয়্যার Redux স্টোরে ইনস্টল করা হলে, Redux অ্যাকশন ক্রিয়েটর ফাংশন রিটার্ন করার জন্য প্রস্তুত থাকে। যখন Thunk অ্যাকশন ক্রিয়েটর কল করা হয়, তখন এটি একটি ফাংশন রিটার্ন করে যা dispatch এবং getState ফাংশন গ্রহণ করতে পারে। এই ফাংশনটি অ্যাসিঙ্ক্রোনাস কাজ সম্পন্ন করার পর dispatch ফাংশন ব্যবহার করে Redux স্টেটে নতুন অ্যাকশন পাঠাতে পারে।

Thunk এর ব্যবহার

Redux-এ API কল করার জন্য Thunk ব্যবহারের একটি সাধারণ উদাহরণ দেওয়া হলো। এতে আমরা একটি API কল থেকে ডেটা নিয়ে Redux স্টেটে সেট করতে শিখবো।

স্টেপ 1: Redux Thunk ইনস্টল করা

প্রথমে, আমাদের Thunk মিডলওয়্যার ইনস্টল করতে হবে:

npm install redux-thunk

স্টেপ 2: Redux Store এ Thunk মিডলওয়্যার যুক্ত করা

Store তৈরি করার সময়, applyMiddleware ফাংশন ব্যবহার করে আমরা Thunk মিডলওয়্যারটি যুক্ত করি:

import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from './reducers';

// Store তৈরি করা Thunk মিডলওয়্যার দিয়ে
const store = createStore(rootReducer, applyMiddleware(thunk));

export default store;

স্টেপ 3: API Call এর জন্য Thunk অ্যাকশন ক্রিয়েটর তৈরি করা

এখন API কল করার জন্য আমরা Thunk ব্যবহার করে একটি অ্যাকশন ক্রিয়েটর তৈরি করবো। Thunk অ্যাকশন ক্রিয়েটর ফাংশন হিসেবে একটি ফাংশন রিটার্ন করবে, যা আসলে API কল করবে এবং তারপরে Redux স্টেটে ডেটা আপডেট করবে।

// actions.js
export const fetchData = () => {
  return (dispatch) => {
    // API কল করা
    dispatch({ type: 'FETCH_DATA_REQUEST' });

    fetch('https://jsonplaceholder.typicode.com/posts')
      .then((response) => response.json())
      .then((data) => {
        // ডেটা সফলভাবে পাওয়ার পর স্টেট আপডেট করা
        dispatch({
          type: 'FETCH_DATA_SUCCESS',
          payload: data,
        });
      })
      .catch((error) => {
        // যদি API কলটি ব্যর্থ হয়, তাহলে error ম্যানেজ করা
        dispatch({
          type: 'FETCH_DATA_FAILURE',
          payload: error,
        });
      });
  };
};

এখানে, fetchData একটি Thunk অ্যাকশন ক্রিয়েটর যা একটি ফাংশন রিটার্ন করছে। এই ফাংশনটি প্রথমে FETCH_DATA_REQUEST অ্যাকশন ডিসপ্যাচ করে, তারপর API কল করে এবং সফল হলে FETCH_DATA_SUCCESS বা ব্যর্থ হলে FETCH_DATA_FAILURE অ্যাকশন ডিসপ্যাচ করে।

স্টেপ 4: Reducer তৈরি করা

API কলের সাফল্য বা ব্যর্থতার উপর ভিত্তি করে স্টেট পরিবর্তন করার জন্য একটি রিডিউসার তৈরি করা হবে।

// reducer.js
const initialState = {
  loading: false,
  data: [],
  error: '',
};

const dataReducer = (state = initialState, action) => {
  switch (action.type) {
    case 'FETCH_DATA_REQUEST':
      return { ...state, loading: true };

    case 'FETCH_DATA_SUCCESS':
      return { ...state, loading: false, data: action.payload };

    case 'FETCH_DATA_FAILURE':
      return { ...state, loading: false, error: action.payload };

    default:
      return state;
  }
};

export default dataReducer;

এখানে:

• FETCH_DATA_REQUEST: API কল শুরু হওয়া অবস্থায় loading সত্য হবে।
• FETCH_DATA_SUCCESS: API কল সফল হলে ডেটা স্টেটে যোগ করা হবে।
• FETCH_DATA_FAILURE: যদি কোনো ত্রুটি ঘটে, তা স্টেটে error হিসেবে রাখা হবে।

স্টেপ 5: React কম্পোনেন্টে API কল ব্যবহার করা

এখন, আমরা আমাদের React কম্পোনেন্টে এই অ্যাকশন ক্রিয়েটরটি কল করে API থেকে ডেটা নিয়ে Redux স্টেটে সেট করতে পারি।

// App.js
import React, { useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { fetchData } from './actions';

const App = () => {
  const dispatch = useDispatch();
  
  // Redux স্টেট থেকে ডেটা এবং লোডিং স্টেট
  const { loading, data, error } = useSelector((state) => state.data);

  useEffect(() => {
    dispatch(fetchData()); // API কল করার জন্য fetchData ডিসপ্যাচ করা
  }, [dispatch]);

  return (
    <div>
      {loading && <h2>Loading...</h2>}
      {error && <h2>Error: {error}</h2>}
      {!loading && !error && (
        <ul>
          {data.map((item) => (
            <li key={item.id}>{item.title}</li>
          ))}
        </ul>
      )}
    </div>
  );
};

export default App;

এখানে:

• useEffect হুক ব্যবহার করে আমরা কম্পোনেন্ট রেন্ডার হওয়া মাত্রই API কল করার জন্য fetchData অ্যাকশন ডিসপ্যাচ করছি।
• useSelector হুক দিয়ে আমরা Redux স্টেট থেকে ডেটা, লোডিং এবং এরর স্টেটকে নিয়ে আসছি।

সারাংশ

Redux Thunk ব্যবহার করে অ্যাসিঙ্ক্রোনাস API কল করা এবং সেই ডেটা Redux স্টেটে সংরক্ষণ করা খুবই সহজ। Thunk আমাদের অ্যাকশন ক্রিয়েটর হিসেবে ফাংশন রিটার্ন করার সুবিধা দেয়, যা অ্যাসিঙ্ক্রোনাস কাজ (যেমন, API কল) পরিচালনা করতে সক্ষম। Thunk এর মাধ্যমে আমরা dispatch ফাংশন ব্যবহার করে API কলের ফলাফল Redux স্টেটে আপডেট করতে পারি। এটি অ্যাপ্লিকেশনকে আরও শক্তিশালী এবং স্কেলেবল করে তোলে।